<template>
  <div class="query">
    <div class="check">
      <div class="c_left">条件搜索栏</div>
      <div class="c_right">
        <div class="clear">
          <div class="fl">
            <span class="c_tip">科室</span>
            <el-select
              v-model="queryInfo.Deptcode"
              filterable
              clearable
              placeholder="请选择"
              class="c_select"
              @change="deptChange"
            >
              <el-option
                v-for="item in deptList"
                :key="item.DeptCode"
                :label="item.DeptName"
                :value="item.DeptCode"
              />
            </el-select>
          </div>
          <div class="fl">
            <span class="c_tip">病区</span>
            <el-select v-model="queryInfo.Wardcode" class="c_select" filterable placeholder="请选择">
              <el-option
                v-for="item in wardCode"
                :key="item.wardCode"
                :label="item.WardName"
                :value="item.wardCode"
              />
            </el-select>
          </div>
          <div class="fl">
            <span class="c_tip">床位</span>
            <el-input v-model="queryInfo.Bedno" placeholder="请输入床位" />
          </div>
          <div class="fl">
            <span class="c_tip">患者姓名</span>
            <el-input v-model="queryInfo.Patient_name" placeholder="请输入患者姓名" />
          </div>
        </div>
        <div class="fl">
          <span class="c_tip">住院号</span>
          <el-input v-model="queryInfo.Inp_no" placeholder="请输入住院号" style="margin-left: 1px" />
        </div>
        <div class="fl">
          <span class="c_tip" />
          <el-button type="primary" class="btn_clear" @click="getInpPatientListJson">查询</el-button>
        </div>
      </div>
    </div>
    <div class="list_tip clear" />
    <div v-if="patientInfoList.patientInfo.length !== 0 ">
      <div class="infogroups" style="width:100%; height:485px">
        <el-scrollbar style="height:100%">
          <div class="table_box">
            <template v-for="(item) in patientInfoList.patientInfo">
              <div :key="item.patient_id" class="infoCard">
                <el-card shadow="hover">
                  <div class="card-title">
                    <div class="header-bedid" @click="patientInfoShowDialog(item.patient_id)">
                      <el-tooltip class="item" :enterable="false" effect="dark" content="查看详情" placement="bottom-end">
                        <a>{{ item.bedno }}床</a>
                      </el-tooltip>
                    </div>
                  </div>
                  <div class="card-body">
                    <div class="info-item">
                      <div class="info-label">住院号:</div>
                      <div class="info-message">
                        <div class="info-adnumber">{{ item.inp_no }}</div>
                      </div>
                    </div>
                    <div class="info-item">
                      <div class="info-label">{{ item.patient_name }}</div>
                      <div class="info-message info-more">
                        <div class="info-age">{{ item.age }}</div>
                        <div class="info-sex">{{ item.sex }}</div>
                      </div>
                    </div>
                    <div class="info-item">
                      <div class="info-label">护理状态</div>
                      <div class="info-message">
                        <div class="info-status"><span>{{ item.nursinglev }}</span></div>
                      </div>
                    </div>
                    <div class="info-item">
                      <div class="info-label">入院时间:</div>
                      <div class="info-message">
                        <div class="info-rydate">{{ item.startdate }}</div>
                      </div>
                    </div>
                    <div class="info-item">
                      <div class="info-label">诊断信息:</div>
                      <div class="info-message">
                        <div class="info-zd">{{ item.disname }}</div>
                      </div>
                    </div>
                  </div>
                </el-card>
              </div>
            </template>
          </div>
        </el-scrollbar>
      </div>
      <pagination :total="querypatientListPage.total" :page.sync="querypatientListPage.pagenum" :limit.sync="querypatientListPage.pagesize" @pagination="getList" />
    </div>
    <div v-else>
      <div class="no-data">无筛选数据</div>
    </div>
  </div>

</template>
<script>

import {
  GetDeptListJson,
  GetInpPatientListJson,
  AttentionLevDetail,
  SaveAttentionDetail,
  PatientInfoDetail
} from '@/api/cpw'
export default {
  data() {
    return {
      // 科室列表
      deptList: [],
      // 病区列表
      wardCode: [],
      // 查房病人列表返回数据
      patientInfoList: {
        // 总页数
        total: '',
        // 当前页
        page: '',
        // 总条数
        records: '',
        // 	病人信息列表
        patientInfo: []
      },
      // 病人详细
      patientInfoDetail: {
        PatientInfo: [],
        OrdersData: [],
        DiseaseInfo: [],
        ExamInfoData: [],
        LabInfoData: [],
        temperature: []
      },
      // 查询参数
      queryInfo: {
        Deptcode: '',
        Wardcode: '',
        Bedno: '',
        Patient_name: '',
        Inp_no: ''
      },
      // 查询病人列表分页参数
      querypatientListPage: {
        // 第n页
        pagenum: 1,
        // 每页多少条
        pagesize: 10,
        // 总条数
        total: 0
      }
    }
  },
  created() {
    this.getDeptListJson()
  },
  methods: {
    // 获取科室列表list
    async getDeptListJson() {
      await GetDeptListJson({
        keyword: ''
      }).then(res => {
        this.deptList = res
      }).catch(err => {
        console.log(err)
      })
    },
    // 科室列表改变
    deptChange() {
      // 初始化查询条件
      this.querypatientListPage.pagenum = 1
      this.querypatientListPage.pagesize = 10
      this.querypatientListPage.total = 0
    },
    // 获取查房病人列表
    async getInpPatientListJson() {
      var tempObject = JSON.parse(JSON.stringify(this.queryInfo))
      for (var key in tempObject) {
        if (tempObject[key] === '') {
          delete tempObject[key]
        }
      }
      await GetInpPatientListJson({
        json: tempObject,
        // 第n页
        pagenum: this.querypatientListPage.pagenum,
        // 每页多少条
        pagesize: this.querypatientListPage.pagesize
      }).then(res => {
        this.patientInfoList.total = res.total
        this.patientInfoList.page = res.page
        this.patientInfoList.records = res.records
        this.querypatientListPage.total = res.records
        this.patientInfoList.patientInfo = res.rows
        console.log(this.patientInfoList.patientInfo)
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取病人详细信息
    async getPatientInfoDetail(patientId) {
      await PatientInfoDetail({
        patient_id: patientId
      }).then(res => {
        this.patientInfoDetail.PatientInfo = res.PatientInfo
        this.patientInfoDetail.OrdersData = res.OrdersData
        this.patientInfoDetail.OrdersData = res.OrdersData
        this.patientInfoDetail.ExamInfoData = res.ExamInfoData
        this.patientInfoDetail.LabInfoData = res.LabInfoData
        this.patientInfoDetail.temperature = res.temperature
      }).catch(err => {
        console.log(err)
      })
    },
    // 病人列表分页数据改变
    async getList(type) {
      this.querypatientListPage.pagenum = type.page
      this.querypatientListPage.pagesize = type.limit
      await this.getRoundPageListJson()
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
  body{
    background:#e6edf5;
  }
  .patientInfo{
    .infoline{
      display: flex;
      justify-content: space-around;
      .fl{
        display: flex;
        padding-bottom: 5px;
        width: 210px;
        .c_tip{
          width: 60px;
          text-align: right;
        }
        .c_text{
          width: 140px;
          padding-left: 4px;
        }
      }
    }
  }
  .query{
    width:100%;
    height:100%;
    background:#e6edf5;
    .check{
      font-size:12px;
      line-height:40px;
      background:#fff;
      text-align:center;
      .c_left{
        width:115px;
        float:left;
        line-height:65px;
      }
      .c_right{
        overflow:hidden;
        color:#636365;
        border-left:1px solid #e6edf5;
        padding:15px 0;
        position:relative;
        .show_btn{
          position:absolute;
          right:20px;
          bottom:15px;
          border:1px solid #e1e1e1;
          background:#f9fafc;
          border-radius:2px;
          text-align:center;
          line-height:32px;
          width:104px;
          height:32px;
          font-size:14px;
          color:#9f9f9f;
          cursor: pointer;
        }
        .fl{
          margin-bottom:10px;
        }
        .c_tip{
          display:inline-block;
          width:80px;
          padding-right:10px;
          text-align:right;
        }
        .c_input{
          width:131px;
          height:40px;
          border:1px solid #dcdfe6;
          border-radius:4px;
          padding-left:5px;
        }
        .c_input::-webkit-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-ms-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-moz-input-placeholder {
          color: #dcdfe6;
        }
        .c_search{
          width:90px;
        }
        .c_searchbtn{
          display:inline-block;
          width:34px;
          height:25px;
          margin-left:3px;
          background:#28a4f4;
          color:#fff;
          font-size:12px;
          text-align:center;
          line-height:26px;
          border-radius:6px;
          cursor:pointer;
        }
        .c_checkbox{
          width:230px;
          height:40px;
          display:inline-block;
          margin-left:-12px;
        }
        .btn_clear{
          padding:0;
          width:60px;
          height:40px;
          line-height:40px;
        }
        .sbtn_box{
          text-align:left;
          padding-left:82px;
        }
        .c_select{
          width:130px;
        }
        @media screen and (min-width:1466px){
          .c_select{
            width:150px;
          }
          .btn_clear{
            padding:0;
            width:70px;
            height:40px;
            line-height:40px;
          }
          .c_input{
            width:150px;
          }
          .c_search{
            width:100px;
          }
          .c_searchbtn{
            width:42px;
            margin-left:4px;
          }
          .c_tip{
            width:100px;
          }
        }
      }
    }
    .list_tip{
      font-size:14px;
      color:#29a4f2;
      padding:10px 18px;
    }

    .infogroups{
      width: 100%;
      height: 100%;
    }
    /deep/.el-scrollbar__wrap {
      overflow-x: hidden;
    }

    .table_box{
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      padding:0 18px;
      .infoCard{
        width: 220px;
        padding-bottom: 20px;
      }
    }
  }
  .el-checkbox__label{
    padding-left:5px;
  }
  .el-checkbox{
    margin-right:10px;
  }
  /deep/.el-card__body{
    padding: 0;
  }
  /deep/.el-input{
    width:150px;
    height:40px;
    border-radius:4px;
    padding-left:5px;
    font-size: 12px;
  }
  .el-card{
    border: 0;
  }
  .no-data{
    font-size: 25px;
    margin-left: 115px;
  }
  .infoCard{
    width: 20%;
    min-width: 20%;
    max-width: 20%;
    padding: 10px 10px;
  }
  .card-title{
    color:#ffffff;
    background-color: #28A4F4;
    height: 75px;
    text-align: center;
    .header-bedid{
      font-size: 20px;
      padding: 10px;
    }
    .header-bedid:hover {
      span {
        border-bottom: 1px solid #fff;
      }
    }
    .header-content:hover{
      span{
        border-bottom: 1px solid #fff;
      }
    }
  }
  .card-body {
    font-size: 12px;
    padding: 10px;
    height: 180px;
    .info-item{
      width: 100%;
      display: flex;
      justify-content: center;
      padding: 5px;
      .info-label{
        flex: 1;
        text-align: right;
      }
      .info-message{
        flex: 1;
        margin-left: 5px;
        .info-status{
          color: #ffffff;
          span{
            padding: 1px 3px;
            border-radius: 3px;
            background-color: #5cb85c;
          }
        }
      }
      .info-more{
        display: flex;
        .info-sex{
          padding-left: 5px;
        }
      }
    }
  }

</style>
